<template>
	<view class="container">
	<!-- 🔧 登录Loading界面 - 认证中、来自授权返回或有重定向路径时显示 -->
	<view v-if="isAuthenticating || isFromAuth || redirectPath" class="auth-loading-container">
		<view class="loading-content">
			<view class="loading-icon">
				<u-loading-icon mode="spinner" size="60" color="#2979ff"></u-loading-icon>
			</view>
			<text class="loading-title">{{ isFromAuth ? '正在处理授权信息' : '正在登录验证' }}</text>
			<text class="loading-subtitle">{{ loadingMessage }}</text>
		</view>
		<view class="loading-footer">
			<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
		</view>
	</view>

	<!-- 🔧 主要内容区域 - 只有登录成功且不是来自授权返回且没有重定向路径才显示 -->
	<view v-else-if="isAuthenticated && !isFromAuth && !redirectPath" class="main-content">
			<!-- 🔧 自定义导航栏 - 只在认证成功后显示 -->
			<view class="custom-navbar">
				<view class="navbar-content">
					<text class="navbar-title">会议签到系统</text>
				</view>
			</view>
			
		<u-transition 
			mode="zoom" 
			:show="showTransition" 
			:duration="300" 
			:custom-style="{marginBottom: '30rpx'}"
		>
			<view class="header">
				<text class="title">会议签到系统</text>
				<text class="subtitle">欢迎使用会议签到系统</text>
			</view>
		</u-transition>
		
		<u-transition 
			mode="zoom" 
			:show="showTransition" 
			:duration="300" 
			:custom-style="{marginBottom: '30rpx'}"
		>
			<employee-card :employee-data="employeeInfo"></employee-card>
		</u-transition>
		
		<view class="card-container">
			<u-transition 
				mode="zoom" 
				:show="showTransition" 
				:duration="300"
			>
				<action-card 
					title="扫码签到/签退" 
					description="使用微信扫一扫功能完成签到" 
					icon-name="scan" 
					icon-color="#2979ff" 
					icon-bg-color="rgba(41, 121, 255, 0.1)" 
					@click="codeSet"
				></action-card>
			</u-transition>
			
			<u-transition 
				mode="zoom" 
				:show="showTransition" 
				:duration="400"
			>
				<action-card 
					title="我的培训记录" 
					description="查看历史培训和会议记录" 
					icon-name="calendar" 
					icon-color="#19be6b" 
					icon-bg-color="rgba(25, 190, 107, 0.1)" 
					@click="list"
				></action-card>
			</u-transition>
		</view>
		
		<view class="footer">
			<text class="footer-text">© 2025 中山公交集团会议签到系统</text>
			<text class="version-text">版本 1.0</text>
			</view>
		</view>
		
		<!-- ❌ 认证失败界面 -->
		<view v-else-if="authError" class="error-container">
			<view class="error-content">
				<u-icon name="warning-fill" size="80" color="#FF6B6B"></u-icon>
				<text class="error-text">认证失败</text>
				<text class="error-message">{{ authError }}</text>
				<u-button type="primary" @click="performAuth" :loading="isAuthLocked">重试认证</u-button>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import EmployeeCard from '@/components/EmployeeCard.vue'
	import ActionCard from '@/components/ActionCard.vue'
	import { mapGetters, mapActions } from 'vuex'
	import * as ww from '@wecom/jssdk'
	
	export default {
		components: {
			EmployeeCard,
			ActionCard
		},
	data() {
		return {
			showTransition: false,
			isScanning: false,
			clickTimer: null,
			isFromAuth: false // 🎯 标志是否来自企业微信授权返回
		}
	},
		
		computed: {
			...mapGetters([
				'isAuthenticating',
				'isAuthenticated', 
				'isAuthLocked',
				'loadingMessage',
				'userInfo',
				'employeeInfo',
				'authError',
				'wxJSSDKReady',
				'redirectPath', // 🎯 添加重定向路径
				// 🎯 用户信息相关getters（与后端数据结构对应）
				'userid',
				'nickname', 
				'empname',
				'cardid',
				'orgid',
				'orgname',
				'emptype',
				'empworkno',
				'isactive',
				'startdate',
				'telephone',
				// 🔧 便捷getters
				'userName',
				'isUserActive'
			])
		},
		
		watch: {
			// 🔧 监控认证状态变化
			isAuthenticated: {
				handler(newVal, oldVal) {
					console.log("🔍 认证状态变化:", { 
						from: oldVal, 
						to: newVal,
						userid: this.userid,
						empname: this.empname,
						orgname: this.orgname,
						emptype: this.emptype
					});
					
					// 如果从未认证变为已认证，显示过渡动画
					if (!oldVal && newVal && this.userid) {
						console.log("✅ 认证成功，准备显示过渡动画");
						console.log("📊 当前用户信息:", {
							userid: this.userid,
							empname: this.empname,
							orgname: this.orgname,
							emptype: this.emptype,
							isactive: this.isactive
						});
						this.showTransitionAnimation();
					}
				},
				immediate: false
			},
			
			// 🔧 监控用户信息变化
			userInfo: {
				handler(newVal) {
					if (newVal) {
						console.log("👤 用户信息已更新:", newVal);
					}
				},
				immediate: false
			}
		},
		
		created() {
			// 🔧 组件创建时检查初始状态
			console.log("🔍 组件created，检查初始认证状态:", {
				isAuthenticating: this.isAuthenticating,
				isAuthenticated: this.isAuthenticated,
				userid: this.userid,
				empname: this.empname,
				orgname: this.orgname,
				emptype: this.emptype,
				isactive: this.isactive,
				hasEmployeeInfo: !!this.employeeInfo
			});
		},
		
	async onLoad() {
		// 🔧 检查URL参数，如果有code参数，说明是从企业微信授权返回
		const urlParams = new URLSearchParams(window.location.search);
		const code = urlParams.get('code');
		
		console.log("🔍 页面onLoad，开始自动认证...");
		console.log("🔍 URL参数检查:", {
			search: window.location.search,
			code: code,
			hasCode: !!code
		});
		
		// 🎯 如果有code参数，设置特殊标志，保持loading状态
		if (code) {
			console.log("🔐 检测到授权码，保持loading状态进行登录验证");
			this.isFromAuth = true; // 设置标志，表示来自授权返回
		}
		
		console.log("🔍 当前认证状态:", {
			isAuthenticating: this.isAuthenticating,
			isAuthenticated: this.isAuthenticated,
			userid: this.userid,
			empname: this.empname,
			orgname: this.orgname,
			emptype: this.emptype,
			isFromAuth: this.isFromAuth
		});
		
		// 异步进行认证检查
		try {
			await this.performAuth();
			console.log("✅ 认证流程完成");
			
			// 🎯 检查是否需要跳转
			if (this.redirectPath) {
				console.log("🔄 有重定向路径，保持loading状态等待跳转:", this.redirectPath);
				// 不要设置 isFromAuth = false，让它保持loading状态直到跳转
				// handleAuthSuccess 会处理跳转
			} else if (this.isFromAuth) {
				// 如果是从授权返回但没有重定向路径，可以显示主页
				console.log("🏠 来自授权返回但无重定向路径，显示主页");
				this.isFromAuth = false;
			}
		} catch (error) {
			console.error("❌ 认证流程失败:", error);
			this.isFromAuth = false; // 认证失败时清除标志
		}
	},
		
	// 🔧 页面创建时也检查状态
	onReady() {
		console.log("🔍 页面onReady，当前状态:", {
			isAuthenticating: this.isAuthenticating,
			isAuthenticated: this.isAuthenticated,
			userid: this.userid,
			empname: this.empname,
			orgname: this.orgname
		});
		
		// 🔧 初始化企业微信JSSDK
		this.initWxJSSDK();
	},
		
		// 🔧 防止页面显示时重复认证
		onShow() {
			console.log("🔍 页面onShow，检查是否需要重新认证...");
			
			// 如果已经认证成功，显示动画效果
			if (this.isAuthenticated && this.userid) {
				console.log("✅ 已认证成功，显示过渡动画");
				this.showTransitionAnimation();
				return;
			}
			
			// 如果认证正在进行中，也不需要重复认证
			if (this.isAuthLocked) {
				console.log("🔒 认证正在进行中，跳过重复认证");
				return;
			}
		},
		
		methods: {
			...mapActions([
				'performAuth',
				'loginWithCode', 
				'getAuthUrl',
				'cleanUrlParams',
				'showMainContent',
				'handleAuthError',
				'updateEmployeeInfo',
				// 'initWxJSSDK', // 使用组件本地的方法，不从store导入
				'logout'
			]),
			// 🔧 显示过渡动画
			showTransitionAnimation() {
				setTimeout(() => {
					this.showTransition = true;
				}, 100);
			},


			
			// 跳转到培训记录列表
			list() {
				if (!this.userid) {
					uni.showToast({
						title: '请先完成认证',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: "/pages/dtest/list"
				});
			},
			
			// 处理扫码签到/签退 - 添加防抖动处理
			codeSet() {
				// 如果已经在扫码中，阻止重复点击
				if (this.isScanning) {
					console.log('扫码操作正在进行中，请勿重复点击');
					// 提示用户正在处理中
					uni.showToast({
						title: '处理中...',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				
				// 清除之前的计时器
				if (this.clickTimer) {
					clearTimeout(this.clickTimer);
						}
				
				// 设置扫码状态为true，防止重复点击
				this.isScanning = true;
				
				// 显示加载提示
				uni.showLoading({
					title: '加载中...',
					mask: true // 添加遮罩，防止用户重复点击
				});
				
				// 🔧 开发环境检测 - 简单判断
				const isDevMode = typeof ww === 'undefined' || 
								  (typeof window !== 'undefined' && window.location.hostname === 'localhost');
				if (isDevMode) {
					// 关闭加载提示
					uni.hideLoading();
					this.isScanning = false;
					
					// 开发环境模拟扫码
					uni.showActionSheet({
						itemList: ['模拟扫描培训1872', '模拟扫描培训1873', '取消'],
						success: (res) => {
							if (res.tapIndex === 0) {
								// 模拟跳转到签到页面
								uni.navigateTo({
									url: `/pages/dtest/index?tid=1872`
								});
							} else if (res.tapIndex === 1) {
								uni.navigateTo({
									url: `/pages/dtest/index?tid=1873`
								});
							}
						}
					});
					return;
				}
				try {
					// 进行企业微信JSSDK授权
					ww.invoke('scanQRCode', {
						needResult: 1,
						scanType: ["qrCode"]
					}, (res) => {
						// 关闭加载提示
						uni.hideLoading();
						
						// 处理完成后，延迟重置扫码状态，防止快速重复点击
						this.clickTimer = setTimeout(() => {
							this.isScanning = false;
						}, 1000);
						
						if (res.errMsg === 'scanQRCode:ok') {
							// 扫码成功，处理结果
							const resultStr = res.resultStr;
							console.log('扫码结果:', resultStr);
							
							// 直接处理扫码结果
							this.processScanResult(resultStr);
						} else {
							// 扫码失败
							console.error('扫码失败:', res);
							this.$refs.uToast.show({
								title: '扫码失败: ' + (res.errMsg || '未知错误'),
								type: 'error'
							});
						}
					});
				} catch (error) {
					// 关闭加载提示
					uni.hideLoading();
					
					// 出错时重置扫码状态
					this.isScanning = false;
					
					console.error('调用扫码API错误:', error);
					this.$refs.uToast.show({
						title: '扫码功能暂不可用',
						type: 'error'
					});
				}
			},
			
			// 执行扫码操作 - 已合并到codeSet方法中
			doScanQRCode() {
				// 保留方法用于兼容
			},
			
			// 获取企业签名的回调函数
			async getConfigSignature(url) {
				// 请求后端API获取签名
				return new Promise((resolve, reject) => {
					// 对URL参数进行编码
					const targetUrl = encodeURIComponent(url || window.location.href);
					// 使用 getter 动态获取当前环境的API地址
					const baseUrl = this.$store.getters.currentApiBaseUrl;
					// 使用V2版本的building接口
					const apiUrl = `${baseUrl}/api.v2/building?url=${targetUrl}`;
					
					console.log('🔧 请求签名接口 (V2):', apiUrl);
					console.log('🔧 原始URL:', url || window.location.href);
					console.log('🔧 编码后URL:', targetUrl);
					
					uni.request({
						url: apiUrl,
						success: (res) => {
							if (res.statusCode === 200 && res.data) {
								// 检查是否有错误码
								if (res.data.code && res.data.code !== 0) {
									console.error('❌ 获取签名失败:', res.data.message);
									reject(new Error(res.data.message || '获取签名失败'));
									return;
								}
								
								resolve({
									timestamp: res.data.timestamp,
									nonceStr: res.data.nonceStr,
									signature: res.data.signature
								});
							} else {
								reject(new Error('获取签名失败'));
							}
						},
						fail: (err) => {
							console.error('❌ 请求签名接口失败:', err);
							reject(err);
						}
					});
				});
			},
			
		// 初始化企业微信JSSDK
		async initWxJSSDK() {
			try {
				console.log('🔧 开始初始化企业微信JSSDK...');
				console.log('🔧 当前环境:', {
					hostname: window.location.hostname,
					href: window.location.href,
					userAgent: navigator.userAgent
				});
				
				// 检查是否在企业微信环境中
				const isWeComEnv = /wxwork/i.test(navigator.userAgent);
				console.log('🔧 是否在企业微信环境:', isWeComEnv);
				
				if (!isWeComEnv) {
					console.warn('⚠️ 当前不在企业微信环境中，JSSDK可能无法正常使用');
				}
				
				// 注册企业微信JSSDK
				const registerConfig = {
					corpId: 'ww44da95994e8f32c1',      // 企业ID
					agentId: '1000216',                 // 应用ID（改为字符串）
					jsApiList: ['scanQRCode'],          // 需要使用的JSAPI列表
					getConfigSignature: this.getConfigSignature // 根据url生成企业签名的回调函数
				};
				
				console.log('🔧 JSSDK注册配置:', registerConfig);
				
				ww.register(registerConfig);
				
				console.log('✅ 企业微信JSSDK注册成功');
				
				// 等待一小段时间确保JSSDK完全初始化
				await new Promise(resolve => setTimeout(resolve, 1000));
				
			} catch (error) {
				console.error('❌ 企业微信JSSDK注册失败:', error);
				console.error('❌ 错误详情:', {
					message: error.message,
					stack: error.stack
				});
				uni.showToast({
					title: '初始化失败: ' + error.message,
					icon: 'none',
					duration: 3000
				});
			}
		},
			
			// 处理扫码结果
			processScanResult(resultStr) {
				console.log('🔍 开始处理扫码结果:', resultStr);
				
				if (resultStr) {
					let teachId = '';
					try {
						// 如果是完整URL，尝试提取参数
						if (resultStr.includes('?')) {
							// 处理包含 # 的URL，提取 # 后面的参数
							let urlToParse = resultStr;
							if (resultStr.includes('#') && resultStr.includes('?')) {
								// 如果URL包含 #，提取 # 后面的部分
								const hashPart = resultStr.split('#')[1];
								if (hashPart && hashPart.includes('?')) {
									urlToParse = 'http://dummy.com/' + hashPart;
								}
							}
							
							const url = new URL(urlToParse);
							// 优先提取 tid 参数（培训ID）
							teachId = url.searchParams.get('tid') || url.searchParams.get('teachId') || url.searchParams.get('number') || '';
							console.log('📋 从URL提取teachId:', teachId, '原URL:', resultStr);
						} else {
							// 可能是直接的培训ID，作为teachId使用
							teachId = resultStr;
							console.log('📋 直接使用teachId:', teachId);
						}
					} catch (e) {
						// 解析失败时，使用整个结果字符串
						console.warn('❌ URL解析失败，使用原字符串:', e);
						teachId = resultStr;
					}
					console.log('🔍 扫码结果 resultStr:', resultStr);
					console.log('🔍 提取的 teachId:', teachId);
					// 如果成功获取到培训ID，跳转到签到页面
					if (teachId) {
						console.log('✅ 准备跳转到签到页面，teachId:', teachId);
						uni.navigateTo({
							url: `/pages/dtest/index?tid=${teachId}`
						});
					} else {
						console.warn('❌ teachId为空');
						this.showErrorToast('无效的二维码，无法获取培训ID');
					}
				} else {
					console.warn('❌ resultStr为空');
					this.showErrorToast('未获取到扫码结果');
				}
			},
			
			// 显示错误提示
			showErrorToast(message) {
				console.log('🔴 显示错误提示:', message);
				try {
					if (this.$refs.uToast) {
						this.$refs.uToast.show({
							title: message,
							type: 'error',
							duration: 3000
						});
					} else {
						// 备用提示方案
						uni.showToast({
							title: message,
							icon: 'none',
							duration: 3000
						});
					}
				} catch (error) {
					console.error('❌ 显示错误提示失败:', error);
					// 最后的备用方案
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 3000
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f7f9fc;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	/* 🔧 认证Loading界面样式 */
	.auth-loading-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f7f9fc;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		margin: 40rpx;
	}

	.loading-icon {
		margin-bottom: 40rpx;
	}

	.loading-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #303133;
		margin-bottom: 16rpx;
		text-align: center;
	}

	.loading-subtitle {
		font-size: 26rpx;
		color: #909399;
		text-align: center;
		line-height: 1.5;
		max-width: 400rpx;
	}

	.loading-footer {
		margin-top: auto;
		padding: 40rpx 0 20rpx;
	}

	.main-content {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 🔧 自定义导航栏样式 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background-color: #2b85e4;
		padding-top: var(--status-bar-height, 0);
	}

	.navbar-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.navbar-title {
		color: white;
		font-size: 18px;
		font-weight: 600;
		text-align: center;
	}

	/* 为主内容添加顶部间距，避免被导航栏遮挡 */
	.main-content .header {
		margin-top: calc(var(--status-bar-height, 0) + 44px + 30rpx);
	}
	
	.header {
		text-align: center;
		margin-bottom: 40rpx;
		padding-left: 0;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666666;
		display: block;
	}
	
	/* 卡片容器 - 左右对等布局 */
	.card-container {
		width: 100%;
		margin-bottom: 40rpx;
		display: flex;
		gap: 20rpx;
		justify-content: center;
	}
	
	/* 左右对等的卡片样式 */
	.card-container :deep(.action-card) {
		flex: 1;
		width: 0;
		margin-bottom: 0;
	}
	
	/* 全局统一卡片样式 */
	:deep(.info-card),
	:deep(.action-card) {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}
	
	:deep(.card-header) {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx 24rpx;
		background: linear-gradient(to right, #fbfcff, #f9fbff);
		border-bottom: 1px solid #f1f3f7;
	}
	
	:deep(.header-icon) {
		width: 44rpx;
		height: 44rpx;
		background-color: #2979ff;
		border-radius: 22rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
	}
	
	:deep(.card-title) {
		font-size: 30rpx;
		font-weight: 600;
		color: #303133;
	}
	
	:deep(.info-list) {
		padding: 24rpx;
	}
	
	:deep(.info-item) {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	:deep(.item-icon) {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		position: relative;
		background-color: rgba(0, 0, 0, 0.04);
		border-radius: 6rpx;
	}
	
	:deep(.item-content) {
		flex: 1;
	}
	
	:deep(.item-label) {
		font-size: 26rpx;
		color: #909399;
		margin-bottom: 4rpx;
	}
	
	:deep(.item-value) {
		font-size: 30rpx;
		color: #303133;
		font-weight: 500;
	}
	
	.footer {
		margin-top: auto;
		text-align: center;
		padding: 20rpx 0;
	}
	
	.footer-text {
		font-size: 24rpx;
		color: #909399;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.version-text {
		font-size: 22rpx;
		color: #c0c4cc;
		display: block;
	}
	
	/* ❌ 认证失败界面样式 */
	.error-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding: 60rpx 40rpx;
		background: linear-gradient(135deg, #ffeaea 0%, #fff5f5 100%);
	}
	
	.error-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		background: white;
		padding: 60rpx 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.15);
		max-width: 600rpx;
	}
	
	.error-text {
		font-size: 36rpx;
		font-weight: 600;
		color: #FF6B6B;
		margin: 30rpx 0 20rpx;
	}
	
	.error-message {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 40rpx;
		text-align: center;
	}
</style>